{% extends 'Post/base.html' %}
{% load static %}


{% block main %}
<div id="layout" class="pure-g">


    <div class="sidebar pure-u-1 pure-u-md-1-4">
        <div class="search-form">
            <form class="pure-form" method="get" action="{% url 'haystack_search' %}">
                <input type="text" class="pure-input-rounded" name="q" placeholder="search">
                <button type="submit" class="pure-button submit-button">Search</button>
            </form>
        </div>
        <div class="header">
            <h1 class="brand-title">不会写代码的cxy</h1>
            <h2 class="brand-tagline">记录小生活 叮～</h2>

            <nav class="nav">
                <ul class="nav-list">
                    <li class="nav-item">
                        <a class="pure-button" href="{% url 'Post:list' %}">
                            <i class="fa fa-home fa-lg"></i>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="pure-button" href="#">小黑屋</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="button-form">
            {% if post_list.has_previous %}
                <a class="pure-button button-left" href="?page={{ post_list.previous_page_number }}">
                    <i class="fa fa-arrow-circle-left fa-inverse">上一页</i>
                </a>
            {% else %}
                <a class="pure-button pure-button-disabled button-left">
                    <i class="fa fa-arrow-circle-left fa-inverse">上一页</i>
                </a>
            {% endif %}

            {% if post_list.has_next %}
                <a class="pure-button button-right" href="?page={{ post_list.next_page_number }}">
                    <i class="fa fa-arrow-circle-right fa-inverse">下一页</i>
                </a>
            {% else %}
                <a class="pure-button pure-button-disabled button-right">
                    <i class="fa fa-arrow-circle-right fa-inverse">下一页</i>
                </a>
            {% endif %}
        </div>
    </div>

    <div class="content pure-u-1 pure-u-md-3-4">
        <div>
            <!-- A wrapper for all the blog posts -->
            {% for post in post_list %}
                <div class="posts">
                    <h1 class="content-subhead">
                        <a class="category" href="{% url 'Post:category' post.category.id %}">
                            <i class="fa fa-archive fa-fw"></i>
                            {{ post.category.name }}
                        </a>

                        <a class="read-more" href="{% url 'Post:detail' post.id %}">
                            阅读更多
                        </a>
                    </h1>

                    <!-- A single blog post -->
                    <section class="post">
                        <header class="post-header">
                            <img width="48" height="48"  class="post-avatar"
                                 src="{% static 'Post/img/favicon.jpg' %}">

                            <h2 class="post-title">{{ post.title }}</h2>

                            <p class="post-meta">
                                <i class="fa fa-thumbs-o-up fa-fw"></i>{{ post.good }}
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <i class="fa fa-eye fa-fw"></i>{{ post.views }}
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <i class="fa fa-clock-o fa-fw"></i>{{ post.modified_time }}
                            </p>
                        </header>

                        <div class="post-description">
                            <p>
                                {{ post.body | truncatewords:"2" | safe }}

                            </p>
                        </div>
                    </section>
                </div>
            {% endfor %}


            <div class="footer">
                <div class="pure-menu pure-menu-horizontal">
                    <ul>
                        <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
                        <li class="pure-menu-item">
                            <a href="https://github.com/ChuXiaoYi?tab=repositories" class="pure-menu-link">
                                <i class="fa fa-github fa-fw"></i>
                                GitHub
                            </a>
                        </li>
                        <li class="pure-menu-item"><a href="https://blog.csdn.net/weixin_40156487"
                                                      class="pure-menu-link">CSDN</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
